<template>
  <navigator @click="link" :url="url" :open-type="status ? 'navigate' : 'switchTab'" hover-class="none" :style="{bottom: bottom + 'rpx'}" class="link-nav u-flex-col u-col-center u-row-center u-fixed">
    <u-icon :name="iconName" color="#fff" size="60"></u-icon>
    <text class="u-m-t-10 u-font-24">{{title}}</text>
  </navigator>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "com-link-nav",
  data() {
    return {};
  },
  props: {
    // 跳转方式
    status: {
      type: Boolean,
      default: true,
    },
    // 链接
    url: {
      type: String,
      default: "",
    },
    // icon图标
    iconName: {
      type: String,
      default: "edit-pen-fill",
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 定位
    bottom: {
      type: [String, Number],
      default: 120,
    },
  },
  computed: {
    ...mapState(["vuex_identity"]),
  },
  methods: {
    link() {
      if (!this.status) {
        this.$u.vuex("vuex_identity", !this.vuex_identity);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.link-nav {
  right: 30rpx;
  z-index: 2;
  width: 140rpx;
  height: 140rpx;
  background-color: $uni-bg-color-main;
  border-radius: 50%;
  color: $uni-text-color-inverse;
}
</style>
